import React, { useEffect, useState } from 'react'
import './index.less';
import { Divider } from 'antd';
import { history } from 'umi';
import FrontNav from './components/nav';
// import FrontContent from './components/front-content';
import { findMore, edit } from '@/api/content';
import Content from './components/content';

export default function IndexPage() {
  const [content, setContent] = useState([]);
  const [condition, setCondition] = useState({ class: 'html' });
  const [id, setId] = useState('');
  const [isNotWrap, setIsNotWrap] = useState(true);
  const [number, setNumber] = useState([])
const navArr = [
    { icon: 'icon-html5', number: 12, name: 'html' },
    { icon: 'icon-css', number: 2, name: 'css' },
    { icon: 'icon-js', number: 1, name: 'js' },
    { icon: 'icon-wangluo', number: 0, name: '网络' },
    { icon: 'icon-lodash', number: 1, name: 'lodash' },
    { icon: 'icon-Moment', number: 5, name: 'moment' },
    { icon: 'icon-hammock', number: 1, name: 'mock' },
    { icon: 'icon-Bootstrap', number: 1, name: 'Bootstrap' },
    { icon: 'icon-zu1', number: 3300, name: 'ES6' },
    { icon: 'icon-npm', number: 2, name: '包管理' },
    { icon: 'icon-tubiao-', number: 200, name: '模块化' },
    { icon: 'icon-React', number: 2, name: 'React'},
    { icon: 'icon-Vue', number: 65, name: 'Vue' },
    { icon: 'icon-webpack', number: 2, name: 'webpack' },
    { icon: 'icon-MV', number: 2, name: 'MVVM' },
    { icon: 'icon-sheji', number: 2, name: 'design' },
    { icon: 'icon-node', number: 2, name: 'node' },
    { icon: 'icon-R', number: 2, name: 'SSR' },
    { icon: 'icon-file_type_typescript', number: 2, name: 'TS' },
    { icon: 'icon-ziyuan', number: 2, name: 'MongoDB' },
    { icon: 'icon-bushu', number: 2, name: '部署' },
    { icon: 'icon-icons8-flutter', number: 2, name: 'flutter' },
];
const getClassNumber = () => {
    let numArr = [];
    navArr.map((item, index) => {
        findMore({class: item.name}).then(res => {
            numArr.push({...item, ...{number: res.data.data.count ? res.data.data.count : '-'}})
            console.log(res.data.data);
            // setContent(res.data.data.data)
          })
    })
    setNumber(numArr)
    console.log(numArr);
}
useEffect(() => {
    getClassNumber()
  }, [])

  useEffect(() => {
    findMore(condition).then(res => {
      console.log(res.data.data.data);

      setContent(res.data.data.data)
    })
  }, [condition])

  const liArr = content.map((item, index) => {
    return (
      <li key={index}>
        <div className='content'>
          <h2
            onClick={() => {
              setId(item._id);
              setIsNotWrap(false)
              // history.push(`/content?id=${item._id}`)
            }}
          >{item.title}</h2>
          <p>{item.description}</p>
        </div>
        <div className="content-bottom">
          <span><i className="iconfont icon-07" />{' '}{item.author}</span>
          <span><i className="iconfont icon-shijian" style={{ color: 'green' }} />{' '}{item.time.split('T')[0]}</span>
          <span onClick={() => {
            setId(item._id);
            setIsNotWrap(false)
            // history.push(`/content?id=${item._id}`)
          }}><i className="iconfont icon-xiaoxi" />{!item.comment.length ? '-' : item.comment.length}</span>
          <span onClick={() => {
            const like = item.like ? item.like : 0;
            edit(item._id, { ...item, ...{ like: like + 1 } }).then((res) => {
              if (res.status === 200) {
                findMore(condition).then(res => {
                  console.log(res.data.data.data);
                  setContent(res.data.data.data)
                })
              }
              console.log(res);

            })
          }}><i className="iconfont icon-aixin" />{item.like}</span>
        </div>
        <Divider dashed />
      </li>
    )
  })

  type nav = {
    class: string
  }

  const conditionEvent = (nav: nav) => {
    setCondition(nav)
  };

  return (
    <div className='front-wrapper'>
      {isNotWrap ? (<div className='globall-wrapper'>
        <div className="front-content">
          <ul>
            {liArr}
          </ul>
        </div>
        <div className="front-nav-wrapper">
          <FrontNav condition={conditionEvent} navList={number}/>
        </div>
      </div>)
        : (
          <div onClick={() => {
            // setIsNotWrap(true)
          }}>
            <Content contentId={id}/>
          </div>
        )}
    </div>
  );
}
